import React, { Component } from 'react'


export default class Ref extends Component {
  // 创建Ref容器
  container = React.createRef();
  container2 = React.createRef();
  // 回调函数的三个特点
  // 程序自己创建的
  // 程序员自己没有进行调用
  // 回调函数自己执行了
  
  //ref 的三种写法
  // 字符串写法
  // 回调函数写法
  // React.createRef() 专人专用
  render() {
    return (
      <div>
        <input ref= {this.container} />&nbsp;
        <button onClick={this.handleClick}>点我提示左侧数据</button>&nbsp;
        <input placeholder="失去焦点提示数据" onBlur={this.handleBlur}  ref = {this.container2}  />
      </div>
    )
  }
  /**
   * 点击按钮触发事件
   */
  handleClick = ()=>{
    // const {refs:{input1:{value}}} = this
    // console.log(container.current.value);
    window.alert(this.container.current.value);
  }

  /**
   * input2输入框失去焦点触发的事件
   */
  handleBlur = ()=>{
    // const {input2} = this.refs;
    // alert(this.input2.value);
    window.alert(this.container2.current.value);
  }
}
